<template>
	<div class="city_body">
		<div class="city_list">
      <Loading v-if="isLoading" />
      <Scroll ref="city_list">
        <div>
          <div class="city_hot">
            <h2>热门城市</h2>
            <ul class="clearfix">
              <li v-for="city in hotList" :key="city.id" @tap="setToCity(city.nm, city.id)">{{city.nm}}</li>
            </ul>
          </div>
          <div class="city_sort" ref="city_sort">
            <div v-for="item in cityList" :key="item.index">
              <h2>{{item.index}}</h2>
              <ul>
                <li v-for="city in item.list" :key="city.id" @tap="setToCity(city.nm, city.id)">{{city.nm}}</li>
              </ul>
            </div>
          </div>
        </div>
      </Scroll>
		</div>
		<div class="city_index">
			<ul>
				<li v-for="(item,index) in cityList" :key="item.index" @touchstart="handleToIndex(index)">{{ item.index }}</li>
			</ul>
		</div>
	</div>
</template>

<script>
import { getCityList } from '@/api/api'
export default {
  name: 'city',
  data() {
    return {
      cityList: [],
      hotList: [],
      isLoading: true
    }
  },
	mounted() {
    let cityList = window.localStorage.getItem('cityList')
    let hotList = window.localStorage.getItem('hotList')
    if(cityList && hotList) {
      this.cityList = JSON.parse(cityList)
      this.hotList = JSON.parse(hotList)
      this.isLoading = false
    } else {
      this.getCityList()
    }
	},
	methods: {
		getCityList() {
      this.isLoading = true
			getCityList().then(res => {
        let resData = res.data
        this.isLoading = false
				if (resData.msg === 'ok') {
					let cities = resData.data.cities
          let { cityList, hotList } = this.formatCityList(cities)
          this.cityList = cityList
          this.hotList = hotList
          window.localStorage.setItem('cityList', JSON.stringify(cityList))
          window.localStorage.setItem('hotList', JSON.stringify(hotList))
				}
			})
		},
		formatCityList(cities) {
			let cityList = []
			let hotList = []
			for (let i = 0; i < cities.length; i++) {
				let city = cities[i]
				if (city.isHot) {
					hotList.push(city)
				}
				let firstLetter = city.py.substr(0, 1).toUpperCase()
				if (toCom(firstLetter)) {
					cityList.push({
						index: firstLetter,
						list: [{ nm: city.nm, id: city.id }]
					})
				} else {
					for (let j = 0; j < cityList.length; j++) {
						let listItem = cityList[j]
						if (listItem.index === firstLetter) {
							listItem.list.push({ nm: city.nm, id: city.id })
							break
						}
					}
				}
			}
			cityList.sort(function(a, b) {
				if (a.index > b.index) {
					return 1
				} else if (a.index < b.index) {
					return -1
				} else {
					return 0
				}
			})
			function toCom(firstLetter) {
				for (let i = 0; i < cityList.length; i++) {
					if (cityList[i].index === firstLetter) {
						return false
					}
				}
				return true
			}

			return { cityList, hotList }
    },
    handleToIndex(index) {
      var h2 = this.$refs.city_sort.getElementsByTagName('h2')
      // this.$refs.city_sort.parentNode.scrollTop = h2[index].offsetTop
      this.$refs.city_list.scrollTo(0,-h2[index].offsetTop)
    },
    setToCity(nm, id) {
      this.$store.commit('city/SETCITYINFO', { nm, id })
			window.localStorage.setItem('nowNm', nm)
			window.localStorage.setItem('nowId', id)
    }
	}
}
</script>

<style lang="scss" scoped>
</style>
